<template>
  <div class="aside">
    <el-aside width="200px" style="background-color: #304156">
      <el-row class="tac">
        <el-col :span="auto">
          <div class="seckill-logo">
            <span class="logo-title">
              <i class="el-icon-s-home"></i>
              产品后台管理系统
            </span>
          </div>
          <el-menu
            style="width: 200px"
            :default-active="defaultActive"
            :default-openeds="defaultOpenedsArray"
            class="el-menu-nav-aside"
            @select="changeSidebar"
            :collapse-transition="false"
            background-color="#304156"
            text-color="#E7EAF3"
            active-text-color="#4091FF"
          >
            <el-menu-item index="/userOperation">
              <span class="aside-font" slot="title">
                <i class="el-icon-user-solid"></i>
                客户管理
              </span>
            </el-menu-item>
            <el-submenu index="2">
              <span class="aside-font" slot="title">
                <i class="el-icon-s-goods"></i>
                产品管理
              </span>

              <el-menu-item class="aside-child-font" index="/goodOperation">
                <i class="el-icon-s-data"></i>
                管理产品
              </el-menu-item>
              <el-menu-item class="aside-child-font" index="/addGood">
                <i class="el-icon-circle-plus"></i>
                添加产品
              </el-menu-item>
            </el-submenu>

            <el-menu-item index="/orderOperation">
              <span class="aside-font" slot="title">
                <i class="el-icon-s-data"></i>
                订单管理
              </span>
            </el-menu-item>

            <el-menu-item index="/logOperation">
              <span class="aside-font" slot="title">
                <i class="el-icon-s-data"></i>
                日志管理
              </span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
  </div>
</template>

<script>
export default {
  name: "Aside",
  methods: {
    changeSidebar(path, index) {
      this.$router.push(path);
      if (index || index != null) this.defaultOpenedsArray = [index[0]];
    },
  },

  data() {
    return {
      defaultActive: "/userOperation",
      defaultOpenedsArray: [],
    };
  },

  created() {
    this.defaultActive = this.$route.path;
  },
};
</script>

<style>
.aside,
.el-aside {
  height: 100vh;
  width: 200px;
  border-right: 0;
  display: block;
  position: fixed;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.seckill-logo {
  width: 200px;
  height: 60px;
  background-color: #0665d0 !important;
}

.logo-title {
  width: 200px;
  height: 60px;
  padding-left: 15px;
  color: white !important;
  font-size: 18px;
  line-height: 60px;
  cursor: default;
}

.aside-font {
  font-size: 15px;
  font-weight: 200;
  letter-spacing: 3px;
}

.aside-child-font {
  font-weight: 100;
  letter-spacing: 3px;
}
</style>